<template>
  <!-- 链平台签约弹窗 -->
  <el-dialog
    :visible.sync="visible"
    :show-close="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    top="10vh"
    width="70%"
    class="shop-in-category-pup-dialog"
  >
    <div class="popup">
      <div class="title">
        <div class="text">{{
            applyForSign ? $t('shopProcess.addSigningLian') : $t('shopProcess.editSigningLian')
          }}
        </div>
        <div class="tips">
          {{ $t('shopProcess.preSigned') }}
          <span class="bold">{{ signingCount }}</span>
          {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}，
          {{ $t('shopProcess.application') }}
          <span class="bold">{{ applyingLianNum }}</span>
          {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}，
          {{ $t('shopProcess.chosen') }}
          <span class="bold">{{ signLianList.length }}</span>
          {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}，
          {{ $t('shopProcess.mostAdd') }}
          <span class="bold">50</span>
          {{ $t('shopProcess.piece') }}{{ $t('shopProcess.lian') }}
        </div>
        <div class="close-btn" @click="closePopup"><i class="el-icon-close"/></div>
      </div>
      <div class="content">
        <div class="left-box">
          <div class="search-box">
            <input v-model="keyword" class="search-input" :placeholder="$t('product.pleaEntLianName')">
            <div class="search-btn" @click="searchLian">
              <i class="el-icon-search"/>
            </div>
          </div>
          <div class="brand-box">
            <div class="brand-list">
              <div
                v-for="(item, index) in allLianList"
                :key="index"
                class="brand-item"
                :class="{'active':item.isSelected===true}"
                @click="addLian(item, index)"
              >
                <el-tooltip
                  :content="item.name"
                  placement="right"
                  effect="light"
                  :open-delay="500"
                >
                  <div class="brand-item-txt">{{ item.name }}</div>
                </el-tooltip>

              </div>
              <div v-if="!allLianList || !allLianList.length" class="brands-empty">{{ $t('order.noData') }}</div>
            </div>
          </div>
        </div>
        <div class="right-box">
          <div class="table-box" :class="{'big-tb': !showCustomization}">
            <!-- height="482" -->
            <el-table
              :data="signLianList"
              :header-cell-style="{height:'50px',background:'#F5F5F5',color:'#000','font-weight': '400'}"
            >
              <el-table-column
                prop="name"
                :label="this.$i18n.t('shopProcess.lianName')"
              />
              <el-table-column
                prop="code"
                :label="this.$i18n.t('shopProcess.lianCode')"
              />
              <el-table-column
                prop="icon"
                :label="this.$i18n.t('shopProcess.lianLogo')"
              >
                <template slot-scope="scope">
                  <ImgShow :src="scope.row.icon" :imgStyle="{width:'57px',height:'57px'}"/>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                :label="this.$i18n.t('sys.operation')"
                align="center"
              >
                <template slot-scope="scope">
                  <div class="default-btn text-btn" @click="deleteBrand(scope.row.id, scope.$index)">
                    {{ $t('text.delBtn') }}
                  </div>
                  <!-- <el-button type="text" @click="deleteBrand(scope.row.brandId, scope.$index)">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>

          </div>
        </div>
      </div>

      <div class="btn-row foot-btn">
        <div class="default-btn" @click="closePopup">{{ $t('remindPop.cancel') }}</div>
        <div class="default-btn primary-btn" @click="comfirmSubmit">{{ $t('remindPop.confirm') }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import imgsUpload from '@/components/imgs-upload'
import imgUpload from '@/components/img-upload'
import {removeHeadAndTailSpaces} from '@/utils/validate'

export default {
  components: {
    imgsUpload,
    imgUpload
  },
  props: {
    /**
     * 是否从店铺信息申请签约
     * applyForSign=true时，请求可以签约的平台链平台列表（已经签约的平台链平台不会返回）
     */
    applyForSign: {
      type: Boolean,
      default: false
    },
    signingCount: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      shopId: null,
      shopCode: '',
      removeHeadAndTailSpaces: removeHeadAndTailSpaces,
      visible: false,
      // 图片前缀
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      keyword: '',
      allLianList: [],
      signLianList: [],
      imgs: '',

      // 是否显示自定义链平台
      showCustomization: false,

      applyingLianNum: 0
    }
  },
  methods: {
    // 初始化
    init (shopId, code) {
      this.shopId = shopId
      this.shopCode = code
      this.getPlatformLian()
      this.queryLianSigningInfo()
      if (!this.applyForSign) {
        this.visible = true
        this.getSignLianList()
      }
    },

    /**
     * 获取全部链平台
     */
    getPlatformLian () {
      this.$http({
        url: this.applyForSign ? this.$http.adornUrl(`/platform/signingAuditing/listApplySigningBlockchain`) : this.$http.adornUrl(`/prod/blockchain/list`),
        method: 'get',
        params: this.$http.adornParams({name: this.keyword, blockchainStatus: 1, shopId: this.shopId})
      }).then(({data}) => {
        if (data && data.length) {
          this.visible = true
          const signLianList = this.signLianList
          const allLianList = data
          this.lianEcho(allLianList, signLianList)
        } else {
          this.$confirm('当前店铺已签约平台全部链平台，暂无可新增签约链平台', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
            this.closePopup()
          })
        }
      }).catch((error) => {
        console.log('err', error)
        this.visible = true
      })
    },

    /**
     * 查询链平台申请信息
     */
    queryLianSigningInfo () {
      this.$http({
        url: this.$http.adornUrl('/platform/blockchain/listSigningByShopId'),
        method: 'get',
        params: this.$http.adornParams({
          shopId: this.shopId,
          status: 0 // 签约状态：1：已通过 0待审核 -1未通过
        })
      }).then(({data}) => {
        this.applyingLianNum = data.length
      })
    },

    /**
     * 获取签约链平台列表
     */
    getSignLianList () {
      this.$http({
        url: this.$http.adornUrl(`/prod/blockchain/listSigningBlockchain`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        this.signLianList = data
        const allBrandList = this.allLianList
        const signBrandList = this.signLianList
        this.lianEcho(allBrandList, signBrandList)
      })
    },

    /**
     * 左侧回显选中链平台或已签约链平台
     * @param {Array} allLianList 全部链平台
     * @param {Array} signLianList 选中链平台和已签约链平台
     */
    lianEcho (allLianList, signLianList) {
      allLianList.forEach(item => {
        item.isSelected = false
      })
      if (signLianList.length > 0 && allLianList.length > 0) {
        for (let i = 0; i < signLianList.length; i++) {
          for (let j = 0; j < allLianList.length; j++) {
            if (signLianList[i].blockchainId === allLianList[j].id) {
              allLianList[j].isSelected = true
              break
            }
          }
        }
      }
      this.allLianList = allLianList
    },

    /**
     * 搜索链平台
     */
    searchLian () {
      this.getPlatformLian()
    },

    /**
     * 选中添加链平台
     */
    addLian (brandObj, index) {
      const length = this.signLianList.length + this.signingCount
      if (length >= 50) {
        this.$message.warning(this.$i18n.t('shopProcess.lianMaxLimitTips'))
      } else {
        if (brandObj.isSelected === false) {
          this.signLianList.push(brandObj)
        }
        this.allLianList[index].isSelected = true
      }
    },

    /**
     * 删除选中链平台
     * @param {Number} id 链平台id
     * @param {Number} index 选中链平台列表索引
     */
    deleteBrand (id, index) {
      // 去除选中样式
      this.allLianList.forEach(brandItem => {
        if (brandItem.id === id) {
          brandItem.isSelected = false
        }
      })
      this.signLianList.splice(index, 1)
    },

    /**
     * 签约链平台
     */
    signLian () {
      const params = []
      this.signLianList.forEach(item => {
        const param = {
          blockchainId: item.id,
          blockchainCode: item.code,
          shopCode: this.shopCode
        }
        params.push(param)
      })
      this.$http({
        url: this.applyForSign ? this.$http.adornUrl('/platform/signingAuditing/addSigningBlockchain') : this.$http.adornUrl('/prod/blockchain/signing'),
        method: 'post',
        data: params,
        params: this.$http.adornParams({
          shopId: this.shopId
        })
      }).then(({data}) => {
        this.$message({
          message: this.$i18n.t('remindPop.succeeded'),
          type: 'success',
          duration: 1000
        })
        this.closePopup()
      })
    },

    /**
     * 确认提交
     */
    comfirmSubmit () {
      let pass = true
      if (!this.signLianList.length) {
        this.$message.error(this.$i18n.t('shopProcess.noLianSelected'))
        pass = false
        return
      }
      if (pass) {
        this.signLian()
      }
    },

    /**
     * 关闭弹窗
     */
    closePopup () {
      this.$emit('closePopup', 'lian')
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-in-category-pup-dialog {
  & ::v-deep .el-dialog__header {
    padding: 0;
  }

  & ::v-deep .el-dialog__body {
    padding-top: 0;
  }

  & ::v-deep .el-dialog {
    min-width: 950px;
  }

  .popup {
    display: block;
    // 表格上的标题
    .title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 64px;
      border-bottom: 1px solid #EAEAEA;

      .text {
        height: 23px;
        line-height: 21px;
        font-size: 16px;

        .stress {
          color: #FF2120;
          padding-right: 5px;
        }
      }

      .tips {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: #999;
        margin-left: 10px;

        .bold {
          color: #000;
        }
      }

      .close-btn {
        font-size: 23px;
        color: #999;
        margin-left: auto;
        cursor: pointer;
      }
    }

    // 内容
    .content {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      margin-top: 20px;

      .left-box {
        width: 20%;

        .search-box {
          position: relative;
          // width: 262px;
          width: 100%;
          height: 36px;
          background: #FFFFFF;
          border: 1px solid #E8E9EC;
          box-sizing: border-box;

          .search-input {
            width: 100%;
            height: 100%;
            padding: 0 67px 0 12px;
            border: none;
            outline: none;
            box-sizing: border-box;
          }

          input::-webkit-input-placeholder {
            font-size: 14px;
            color: #999;
          }

          .search-btn {
            position: absolute;
            right: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 55px;
            height: 100%;
            font-size: 20px;
            color: #CBCED4;
            border-left: 1px solid #E8E9EC;
            cursor: pointer;
          }
        }

        .brand-box {
          // width: 262px;
          width: 100%;
          height: 525px;
          border: 1px solid #E9EAEC;
          box-sizing: border-box;
          overflow-y: scroll;
          margin-top: 14px;

          .brand-list {
            .brand-item {
              width: 100%;
              height: 47px;
              line-height: 47px;
              font-size: 14px;
              padding-left: 14px;
              overflow: hidden;
              cursor: pointer;
              margin-bottom: 3px;

              .brand-item-txt {
                display: inline-block;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .active {
              background: rgba(24, 144, 255, 0.13);
            }

            // 空
            .brands-empty {
              display: block;
              margin-top: 100px;
              text-align: center;
              color: #999;
            }
          }

          /* 谷歌隐藏滚动条 */
          &::-webkit-scrollbar {
            display: none;
          }

          /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
          /* IE隐藏滚动条 */
          -ms-overflow-style: none;
          /* 火狐隐藏滚动条 */
          overflow: -moz-scrollbars-none;
        }

        /* 谷歌隐藏滚动条 */
        &::-webkit-scrollbar {
          display: none;
        }

        /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
        /* IE隐藏滚动条 */
        -ms-overflow-style: none;
        /* 火狐隐藏滚动条 */
        overflow: -moz-scrollbars-none;
      }

      .right-box {
        width: 80%;
        // width: 946px;
        margin-left: 21px;

        .table-box {
          border-left: 1px solid #E9EAEC;
          border-right: 1px solid #E9EAEC;
          box-sizing: border-box;
          // 表格滚动条设置
          & ::v-deep .el-table__body-wrapper {
            max-height: 432px;
            overflow-y: scroll;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE 10+ */
          }

          & ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }

          & ::v-deep .el-table__body {
            width: 100%;
          }

          & ::v-deep tr.el-table__row:last-child {
            td {
              border-bottom: 0;
            }
          }

          // 上传图片样式
          .business-qual {
            & ::v-deep .up-img-box,
            & ::v-deep .plugin-images,
            & ::v-deep .mul-pic-upload {
              height: 80px;
            }

            & ::v-deep .el-upload-list--picture-card .el-upload-list__item {
              width: 80px;
              height: 80px;
              margin-bottom: 0;
            }

            & ::v-deep .pic-uploader-component .el-upload .pic-uploader-icon,
            & ::v-deep .el-upload--picture-card {
              width: 80px;
              height: 80px;
              line-height: 80px;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            & ::v-deep .plugin-images .el-upload {
              width: 80px;
              height: 80px;

              .pic {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            & ::v-deep .pic-uploader-component .el-upload .pic {
              width: 80px;
              height: 80px;
            }

            & ::v-deep .el-upload-list--picture-card .el-upload-list__item {
              border-color: #dcdfe6;
            }
          }

          .add-bank-info-table {
            & ::v-deep .el-form-item {
              margin-top: 16px;
              margin-bottom: 16px;
            }

            // & ::v-deep .el-form-item.is-error {
            //   margin-bottom: 20px;
            // }
            // & ::v-deep .el-form-item__content {
            //   line-height: inherit;
            // }
            // & ::v-deep .el-table .cell {
            //   line-height: inherit;
            // }
          }
        }

        .table-box.big-tb {
          & ::v-deep .el-table__body-wrapper {
            max-height: 525px;
          }
        }

        .custom-box {
          display: flex;
          align-items: center;
          // width: 945px;
          width: 100%;
          height: 60px;
          font-size: 14px;
          background: #FAFAFA;
          border: 1px solid #EAEAEA;
          box-sizing: border-box;
          margin-top: 17px;
          padding: 0 10px;

          .text {
            padding-left: 10px;
          }

          .add-btn {
            // width: 140px;
            // height: 36px;
            // line-height: 34px;
            // text-align: center;
            // background: #FFFFFF;
            // border: 1px solid #EAEAEA;
            // box-sizing: border-box;
            // margin-right: 25px;
            margin-left: auto;
            cursor: pointer;
          }
        }

      }
    }

    .foot-btn.btn-row {
      margin-top: 30px;
      text-align: right;
    }

  }
}
</style>
